<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TankGame1</title>
</head>
<body id="page">
	<h1>经典的坦克大战</h1>
	<!-- 3EC000 -->
	<canvas id="tankMap" width="500px" height="600px" style="background-color: #000000"></canvas>
	<script src="javascript/const.js" type="text/javascript" charset="utf-8"></script>
	<script src="javascript/Help.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="javascript/tank.js"></script>
	<script type="text/javascript" src="javascript/heroTank.js"></script>
	<script type="text/javascript" src="javascript/enemyTank.js"></script>
	
	<script type="text/javascript" src="javascript/brick.js"></script>
	<script type="text/javascript" src="javascript/steel.js"></script>
	
	<script type="text/javascript" src="javascript/drawTank.js"></script>
	<script type="text/javascript" src="javascript/drawInfo.js"></script>
	<script type="text/javascript" src="javascript/drawBrick.js"></script>
	<script type="text/javascript" src="javascript/drawSteel.js"></script>
	
	<script type="text/javascript" src="javascript/map.js"></script>
	
	<script type="text/javascript">
	var page   = document.getElementById('page');
	var canvas = document.getElementById('tankMap');
	var cxt    = canvas.getContext("2d");
	var key    = []

	var heroColor = ['#6699CC' , '#006699']
	var hero = new Hero(225 ,470 ,0 ,heroColor);
	hero.speed = 5;
	
	curMap = 0;
	
	
	var enemies = map[curMap].enemies.slice(0);
	var showEnemies = enemies.splice(0,4);
	var bricks = map[curMap].bricks.slice(0);
	var steels = map[curMap].steels.slice(0);
	var endTimer=null;
	function flashMap() {
		cxt.clearRect ( 0 , 0, 1200, 600 );
		keyEvent();
		if( !endTimer &&  showEnemies.length === 0 ){
			endTimer = setTimeout( function(){
				console.log('Game over')
				clearInterval(flashInterval);
				drawEnd();
				
				if(curMap < map.length) curMap++;
				else{
					console.log('游戏完全结束');
					alert('恭喜你通关了！刷新页面重新闯关');
					return;
				}
				enemies = map[curMap].enemies.slice(0);
				showEnemies = enemies.splice(0,4);
				bricks = map[curMap].bricks.slice(0);
				steels = map[curMap].steels.slice(0);
				endTimer=null;
				hero.x = 225;
				hero.y = 470;
				
				setTimeout(function(){
					for (var i = 0; i < showEnemies.length; i++) {
						enemyRun( showEnemies[i] ,i );
					}
					flashInterval = setInterval( flashMap,13 );
				},5000);
			} , 5000)
		}
		drawTank( hero );

		for (var i = 0; i < showEnemies.length; i++) {
			drawTank( showEnemies[i] );
			if( showEnemies.length < 4 && enemies.length !== 0 ){
				var newEnemy = enemies.splice(0,1)[0];
				showEnemies.push( newEnemy );
				enemyRun( newEnemy )
			}
			
		}
		drawHeroLife();
		for (var i = 0; i < bricks.length; i++) {
			drawBrick(bricks[i])
		}
		for (var i = 0; i < steels.length; i++) {
			drawSteel(steels[i]);
		}
	}
	
	// 刷新重绘
	var flashInterval = setInterval( flashMap,13 );
	
	// 敌机AI
	// 自由移动发射
	for (var i = 0; i < showEnemies.length; i++) {
		enemyRun( showEnemies[i] ,i );
	}
	function enemyRun(itemEnemy){
		var direct = 2;
		var count = 0;
		var steps = 80;
		itemEnemy.timer = setInterval(function () {
			if( count > steps ){
				direct = parseInt(Math.random() * 4);
				count = -direct;
				steps = parseInt(Math.random() * 200);
			}
			count++;
			var dir = ['moveUp' , 'moveRight' , 'moveDown' , 'moveLeft'];
			itemEnemy[ dir[ direct ] ]();
			// 敌机子弹发射频率
			if( !itemEnemy.fireTimer ){
				itemEnemy.fireTimer = setTimeout(function(){
					itemEnemy.fire();
					itemEnemy.fireTimer = null;
				},parseInt(Math.random() * 5000));
			}
		}, 2 * 15 / itemEnemy.speed );
	}
	
	// 英雄操作
	page.onkeydown = function (ev) {
		var ev = ev || window.event;
		var keycode = ev.keyCode;
		// console.log(ev);
		if( !key.contain( keycode ) ) key.push( keycode );
//		switch( keycode ){
//			case 87: // up
//				if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveUp();} , 30);
//			break;
//			case 68: // right
//				if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveRight();} , 30);
//			break;
//			case 83: // down
//				if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveDown();} , 30);
//			break;
//			case 65: // left
//				if ( !hero.moveTimer ) hero.moveTimer = setInterval( function(){hero.moveLeft();} , 30);
//			break; 
//			case 74: // J
//				hero.fire();
//			break;
//		}
	}
	page.onkeyup = function  (ev) {
		var ev = ev || window.event;
		var keycode = ev.keyCode;
		key.remove( keycode );
//		switch( keycode ){
//			case 87: // up
//				clearInterval( hero.moveTimer );
//				hero.moveTimer = null;
//			break;
//			case 68: // right
//				clearInterval( hero.moveTimer );
//				hero.moveTimer = null;
//			break;
//			case 83: // down
//				clearInterval( hero.moveTimer );
//				hero.moveTimer = null; 
//			break;
//			case 65: // left
//				clearInterval( hero.moveTimer );
//				hero.moveTimer = null;
//			break; 
//			case 74: // J
//				hero.fire();
//			break;
//		}
	}
	function keyEvent(){
		if( key.contain( UP ) ){
			hero.moveUp();
		}else if( key.contain( RIGHT ) ){
			hero.moveRight();
		}else if( key.contain( LEFT ) ){
			hero.moveLeft();
		}else if( key.contain( DOWN ) ){
			hero.moveDown();
		}
	}
	</script>
</body>
</html>